@page "/circular-gauge/pointer-drag"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes pointer and ranges drag in circular gauge. The position of pointer value can be changed by using pointer value and we can drag the pointer and ranges by enabling pointer drag and range drag options.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to move pointers and ranges in gauge using drag and drop. Use <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.CircularGauge.SfCircularGauge~EnablePointerDrag.html'>EnablePointerDrag</a></code> property to enable or disable the pointer drag functionality. Use <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.CircularGauge.SfCircularGauge~EnableRangeDrag.html'>EnableRangeDrag</a></code> property, to enable or disable the range drag functionality. </p>
   <p> More information on the pointers and range drag can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/pointers/#dragging-pointer'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfCircularGauge EnablePointerDrag="@PointerDrags" EnableRangeDrag="RangeDrag">
        <CircularGaugeEvents OnDragEnd="OnDragEnd"/>
        <CircularGaugeAxes>
            <CircularGaugeAxis EndAngle="140" StartAngle="220" Radius="80%" Minimum="0" Maximum="120">
                <CircularGaugeAnnotations>
                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="45%">
                        <ContentTemplate>
                            <div class="templateAlign"><span>@TemplateValue MPH</span></div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                </CircularGaugeAnnotations>
                <CircularGaugeAxisLineStyle Width="0.01" Color="#9E9E9E"/>
                <CircularGaugeAxisMajorTicks UseRangeColor="true"/>
                <CircularGaugeAxisMinorTicks UseRangeColor="true"/>
                <CircularGaugeAxisLabelStyle UseRangeColor="true"/>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="@FirstRangeStart" End="@FirstRangeEnd" StartWidth="8" EndWidth="8" Radius="108%" Color="@FirstRangeColor"/>
                    <CircularGaugeRange Start="@SecondRangeStart" End="@SecondRangeEnd" StartWidth="8" EndWidth="8" Radius="108%" Color="@SecondRangeColor"/>
                    <CircularGaugeRange Start="@ThirdRangeStart" End="@ThirdRangeEnd" StartWidth="8" EndWidth="8" Radius="108%" Color="@ThirdRangeColor"/>
                </CircularGaugeRanges>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="@PointerValue" Radius="60%" Color="@PointerColor" MarkerWidth="5">
                        <CircularGaugeCap Radius="10">
                            <CircularGaugeCapBorder Width="5" Color="@PointerColor"/>
                        </CircularGaugeCap>
                        <CircularGaugeNeedleTail Length="0.01%" Color="@PointerColor"/>
                    </CircularGaugePointer>
                    <CircularGaugePointer Value="@PointerValue" Radius="110%" Color="@PointerColor" MarkerWidth="20" MarkerHeight="20" Type="PointerType.Marker" MarkerShape="GaugeShape.InvertedTriangle"/>
                </CircularGaugePointers>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table  style="width: 100%">
                <tr>
                    <td>
                        <div>Pointer Value <span class="value">@SliderValueText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@PointerValue" min="0" max="120" @onchange="PointerDragChange" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Allow Pointer Drag</div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox ValueChange="@EnableDragCheckbox" Checked="@EnableDragChange" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Allow Ranges Drag</div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox ValueChange="@EnableRangeChange" Checked="@EnableRangeChanges" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<style>
    .value{
        margin-left:10px;
    }
    .templateAlign{
        font-weight: lighter;
        font-style: oblique;
        margin-left:-20px;
        font-size: 14px;
        color:@TemplateColor;
    }
    tr {
        height: 40px;
    }
    td{
        width:50%;
    }
</style>
@code{
    private bool PointerDrags = true;
    private bool RangeDrag = false;
    private string FirstRangeColor = "#30B32D";
    private string SecondRangeColor = "#E5C31C";
    private string ThirdRangeColor = "#F03E3E";
    private string PointerColor = "#E5C31C";
    private string TemplateValue = "70";
    private string TemplateColor = "#E5C31C";
    private bool EnableDragChange = true;
    private bool EnableRangeChanges = false;
    private double PointerSliderValue = 70;
    private double PointerValue = 70;
    private double SliderValueText = 70;
    private double FirstRangeStart = 0;
    private double FirstRangeEnd = 40;
    private double SecondRangeStart = 40;
    private double SecondRangeEnd = 100;
    private double ThirdRangeStart = 100;
    private double ThirdRangeEnd = 120;
    public void EnableDragCheckbox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        EnableDragChange = args.Checked;
        PointerDrags = args.Checked;
    }
    public void EnableRangeChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        EnableRangeChanges = args.Checked;
        RangeDrag = args.Checked;
    }
    private void PointerDragChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        PointerSliderValue = Convert.ToDouble(args.Value);
        SetPointer(PointerSliderValue);
    }
    public void OnDragEnd(Syncfusion.Blazor.CircularGauge.PointerDragEventArgs args) {
        if (args.Type == "pointerEnd")
            SetPointer(args.CurrentValue);
    }
    private void SetPointer(double currentPointerValue) {
        PointerColor = TemplateColor = ((currentPointerValue <= FirstRangeEnd && currentPointerValue >= FirstRangeStart) ? FirstRangeColor :
            ((currentPointerValue > SecondRangeStart && currentPointerValue <= SecondRangeEnd) ? SecondRangeColor :
            ((currentPointerValue > ThirdRangeStart && currentPointerValue <= ThirdRangeEnd) ? ThirdRangeColor : null)));
        PointerValue = currentPointerValue;
        TemplateValue = (Math.Ceiling(currentPointerValue)).ToString();
        SliderValueText = Math.Ceiling(currentPointerValue);
    }
}
